<template>
	<div class="page-main" :class="isFixed ? 'fixed' : ''">
		<div v-if="!isGetUserInfo" class="main" style="padding-top: 0;" @click="handlerClick">{{ title }}</div>
		<button v-if="isGetUserInfo" class="main" style="padding-top: 0;" @click="handlerClick" hover-class="none" open-type="getUserInfo" @getuserinfo="handlerGetUserInfo">{{ title }}</button>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		title: {
			type: String,
			default: () => {
				return '完成';
			}
		},
		isFixed: {
			type: Boolean,
			default: () => {
				return true;
			}
		},
		isGetUserInfo: {
			type: Boolean,
			default: () => {
				return false;
			}
		}
	},
	methods: {
		handlerClick() {
			this.$emit('click', true);
		},
		handlerGetUserInfo(e) {
			this.$emit('getUserInfo', e)
		}
	}
};
</script>

<style scoped lang="scss">
.page-main {
	width: 100%;
	background: #fff;
	.main {
		width: 710upx !important;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36upx;
		font-weight: bold;
		color: #fff;
		line-height: 1;
		background:linear-gradient(90deg,$uni-color-qian 0%,$uni-color-shen 100%);
		// box-shadow:0px 1px 2px 0px rgba(0,0,0,0.5);
		border-radius: 40upx;
	}
}
.fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	padding-bottom: 60upx;
	padding-top: 20upx;
	display: flex;
	justify-content: center;
}
</style>
